<!--头部组件-->
<template>
  <div class="headerTopWrapper">
    <div class="mainChatTopWrapper">
      <Logo />
      <Search />
      <Avatar @on-img-click="onAvatarClick">
        <NotifyList />
      </Avatar>
    </div>
    <!-- 个人详情抽屉 -->
    <Drawer :visible.sync="isShowDrawer" :modal="false" :withHeader="false" :direction="direction">
      <PersonDetail :isShowDrawer="isShowDrawer" />
    </Drawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import IconFont from '@/components/IconFont.vue'
import Search from '@/components/Search.vue'
import Avatar from '@/components/Avatar.vue'
import Logo from '@/components/Logo.vue'
import Drawer from '@/components/Drawer.vue'
import PersonDetail from '@/components/chat/personDetail.vue'
import NotifyList from '@/components/chat/notifyList.vue'
@Component({
  components: {
    IconFont,
    Search,
    Avatar,
    Logo,
    Drawer,
    PersonDetail,
    NotifyList,
  },
})
export default class HeaderTop extends Vue {
  // 是否展示抽屉
  isShowDrawer: boolean = false
  // 抽屉方向
  direction: string = 'rtl'

  // 展示提示列表
  isShowList: boolean = false

  // 头像点击出现详情
  onAvatarClick() {
    this.isShowDrawer = true
  }
}
</script>

<style lang="scss" scoped>
.mainChatTopWrapper {
  overflow: hidden;
  height: 89px;
  border: 1px solid #2a292e;
  border-right: none;
  border-top: none;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>